import React, { ReactNode } from 'react';
import { Box, SellingCard, Text } from '@nova-hf/ui';
import UI from 'beta/store/ui';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ContractStatus, SubscriptionVariant, useContractsQuery } from 'typings/graphql';

const YourServiceSettingsContainer = ({ serviceId, ui }: { serviceId: string; ui?: UI }) => {
  const { query } = useRouter();
  const customerId = typeof query?.customerId === 'string' ? query?.customerId : '';

  const { t } = useTranslation('stillingar');
  const { data, loading, error } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  if (loading) return <Box>Hleður</Box>;
  if (error || !data?.contracts.contracts) return <Box> Þjónustuleið fannst ekki </Box>;

  const contract = data?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;

  const formatTitle: Record<string, string> = {
    frelsi: 'Frelsi',
    askrift: 'Áskrift',
    ljosleidari: 'Ljósleiðari',
    alltsaman: 'AlltSaman',
    'nova-tv': 'NovaTv',
  };

  if (
    variant?.__typename !== 'SubscriptionVariant' &&
    variant?.__typename !== 'ProvisionedSubscriptionVariant'
  )
    return (
      <Box>
        <Text variant="pLargeBold" color="black100" marginBottom={3}>
          {'Úps eitthvað fór úrskeiðis'}
        </Text>
      </Box>
    );

  return (
    <>
      <Box>
        <Text variant="pLargeBold" color="black100" marginBottom={3}>
          {t('yourService.subtitle')}
        </Text>
      </Box>
      <Box width={{ sm: '11/12', lg: '8/12' }}>
        <SellingCard
          color={ui?.serviceColor ?? 'pink'}
          title={variant?.slug ? formatTitle[variant.slug] : ''}
          dottedShadow="none"
          description={(variant as SubscriptionVariant)?.eesDataVolume ?? ''}
          {...(variant?.slug === 'frelsi' && {
            pill: t('yourService.pill'),
          })}
          button={{
            colorScheme: ui?.serviceColor ?? 'pink',
            text: t('yourService.buttonText'),
            wrapper: (link: ReactNode) => (
              <Link
                href={{
                  pathname: '/beta/[customerId]/thjonustur/[serviceId]/thjonustuleidabreyting',
                  query: { customerId: query.customerId, serviceId: query.serviceId },
                }}
                legacyBehavior
              >
                {link}
              </Link>
            ),
          }}
        />
      </Box>
    </>
  );
};

export default inject('ui')(observer(YourServiceSettingsContainer));